<template>
	<div class="mobile-login-box">
		<!-- <div class="login-box"> -->
			<div class="top-box"></div>
            <div class="img-box my-7">
				<img src="/src/assets/images/avatar/ai_logo.png" class="w-3/5">
			</div>
			<div class="login-name text-xl">人工智能移动端  v1.0</div>
			<div class="form-box w-full">
				<el-form :model="loginForm" :rules="rules" ref="loginFormRef" class="w-full flex flex-col justify-center items-center h-full">
					<el-form-item prop="username" required>
						<el-input v-model="loginForm.username" :prefix-icon="User"
							@keydown.enter="focusPassword"></el-input>
					</el-form-item>
					<el-form-item prop="password" required>
						<el-input type="password" ref="passwordInputRef" v-model="loginForm.password" :prefix-icon="Lock"
							@keydown.enter="handleLogin"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button round @click="handleLogin">登录</el-button>
						<!-- <el-button type="info" round>Info</el-button> -->
					</el-form-item>
				</el-form>
			</div>
			<div class="company-name text-xl mb-5 text-white">Designed  by 上海国位信息科技</div>
			<!-- <pre class="name-box">CPSC  AI</pre> -->
			<!-- <el-card style="width: 400px;" shadow="always">
				<div class="login-name">欢迎来到CPSC人工智能平台</div>
				<el-form :model="loginForm" :rules="rules" ref="loginFormRef">
					<el-form-item prop="username" required>
						<el-input v-model="loginForm.username" :prefix-icon="User" placeholder="登录账号"
							@keydown.enter="focusPassword"></el-input>
					</el-form-item>
					<el-form-item prop="password" required>
						<el-input type="password" ref="passwordInputRef" v-model="loginForm.password" :prefix-icon="Lock" placeholder="密码"
							@keydown.enter="handleLogin"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="handleLogin">登录</el-button>
					</el-form-item>
				</el-form>
			</el-card> -->
		<!-- </div> -->
	</div>
</template>

<script lang="ts" setup>
import { ref, reactive } from "vue";
import { User, Lock } from "@element-plus/icons-vue";
import AuthAPI from "@/api/userManage/userManage";
import UserManage from "@/api/userManage/userManage";

import { type LoginData } from "@/api/auth/types";

import router from "@/router";

const loginForm = reactive({
	username: '',
	password: ''
});

const rules = {
	username: [
		{ required: true, message: '请输入登录账号', trigger: 'blur' }
	],
	password: [
		{ required: true, message: '请输入密码', trigger: 'blur' }
	]
};

const loginFormRef = ref();
const passwordInputRef = ref();

const focusPassword = () => {
	passwordInputRef.value.focus();
};

const handleLogin = () => {
	loginFormRef.value.validate((valid: boolean) => {
		if (valid) {
			const loginData = ref<LoginData>({
				account: loginForm.username,
				pwd: loginForm.password
			});
			AuthAPI.getUesrLogin(loginData.value).then(res => {
				// console.log(loginForm,"loginForm");
				UserManage.getUser(res.data, '0').then(ret => {
					// console.log(ret.data,"data");
					localStorage.setItem('mobileUserInfo', JSON.stringify(ret.data));
				})
				localStorage.setItem('mobileAccessToken', `${res.data}`);
				ElMessage.success("登录成功");
				router.replace({ path: "/mobile" });
			})
		} else {
			ElMessage.error("请填写完整的账号和密码");
		}
	});
};


</script>

<style scoped>	
.mobile-login-box {
	display: flex;
	height: 100vh;
	flex-direction: column;
	align-items: center;
	/* justify-content: center; */
	background:linear-gradient(to bottom, #2082d2, #6dc1f7);
}
.top-box{
	height: 8%;
	border-bottom: 1px solid #77b3e4;
	width: 100%;
}
.login-name{
	color: #fff;
}
.img-box{
	width: 100%;
	display: flex;
	justify-content: center;
}
.form-box{
	flex: 1;
	display: flex;
	justify-content: center;
	align-items: center;
}
.el-input i {
	font-size: 18px !important;
}
.el-button{
	width: 100%;
}
.el-form-item{
	width: 70%;
	height: 10%;
	border-bottom: 1px solid #fff;
}
.el-form-item:last-child{
	border-bottom: none;
	margin-top: 20px;
}
/* 改变input前面的图标大小 ，这个有效果 */
:deep .el-input__prefix-inner .el-input__icon {
	font-size: 30px;
	color: #fff;
}
:deep .el-input__wrapper{
	background: none;
	border: none;
    box-shadow: none;
    resize: none;
};

.el-input__inner::-webkit-input-placeholder {
  color: white;
}

.el-input__inner:-ms-input-placeholder {
  color: white;
}
::v-deep(.el-input__inner::placeholder)  {
  color: white;
}
.el-input /deep/ .el-input__inner {
  color:#fff;
  font-size: 25px;
}
.el-button{
	height: 100%;
	/* border-radius: 10%; */
	font-weight: bold;
}
::v-deep(.el-button span){
	font-size: 17px;
	font-weight: bold;
}

/* 去掉验证时的边框 */
::v-deep(.el-input__wrapper) {
  border: none;
  box-shadow: none !important;
}
::v-deep(.el-form-item__error){
	top: 112%;
}
</style>